
function oColorpiker() { }
function ce(tag) {
    return document.createElement(tag);
}
function addCe(tagElement, parentElement, classname, innerstr, divEL) {
    var tagElement = ce(divEL || 'div');
    tagElement.className = classname || '';
    tagElement.innerHTML = innerstr || ''
    parentElement.appendChild(tagElement);
    return tagElement;
}
function colorRGB2Hex(color) {
    var r = color[0];
    var g = color[1];
    var b = color[2];
    var hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
    return hex.toUpperCase();
}

//元素生成
var colorpiker = document.getElementById('colorpiker');
//header部分
oColorpiker.prototype.color_picker_style = addCe('color_picker_style', colorpiker, 'color-picker-style');
oColorpiker.prototype.color_picker_str = addCe('color_picker_str', oColorpiker.prototype.color_picker_style, 'color-picker-str', '推荐色', 'span');
oColorpiker.prototype.color_picker_list = addCe('color-picker-list', oColorpiker.prototype.color_picker_style, 'color-picker-list', '', 'ul');
for (i = 0; i < 8; i++) {
    addCe('color_picker_point', oColorpiker.prototype.color_picker_list, 'color-picker-point', '', 'li')
}
//小圆点样式切换
oColorpiker.prototype.color_picker_list.addEventListener('click', function (e) {
    var lists = document.querySelectorAll('.color-picker-point');
    lists.forEach(function (item) {
        item.classList.remove('color-add-style');
        if (e.target.className.indexOf('color-picker-point') !== -1) {
            e.target.classList.add('color-add-style');
        }
    })
}, true)
// oColorpiker.prototype.color_picker_str.innertext = '推荐色';
console.log(oColorpiker.prototype)

//颜色拾取区(左)
oColorpiker.prototype.left_palette = addCe('left_palette', colorpiker, 'left-palette');

oColorpiker.prototype.left_palette_white = addCe('left_palette_white', oColorpiker.prototype.left_palette, 'left-palette-white');
oColorpiker.prototype.left_palette_black = addCe('left_palette_black', oColorpiker.prototype.left_palette, 'left-palette-black');
oColorpiker.prototype.color_picker_getpoint = addCe('color_picker_getpoint', oColorpiker.prototype.left_palette_black, 'color-picker-getpoint')

oColorpiker.prototype.left_palette_black.addEventListener('mousedown', function () {

}, true)
//颜色维度区(右)
oColorpiker.prototype.right_palette = addCe('right_palette', colorpiker, 'right-palette');
oColorpiker.prototype.palette_rule = addCe('palette_rule', oColorpiker.prototype.right_palette, 'rule');


//创建颜色展示区和文字展示区
// var tone = addCe('tone', colorpiker, 'tone');
var rgbInner = addCe('rgbInner', colorpiker, 'rgb-inner');


//取消和确认
oColorpiker.prototype.color_cancel = addCe('color_cancel', colorpiker, 'color-cancel', '取消');
oColorpiker.prototype.color_submit = addCe('color_submit', colorpiker, 'color-submit', '确认');









var right_color = [255, 0, 0];
//获取右边色盘RGB输出值
oColorpiker.prototype.palette_rule.addEventListener('mousedown', function (e) {
    //起始Y
    console.log('sk')
    var startY = e.pageY;
    //偏移值
    var top = oColorpiker.prototype.palette_rule.offsetTop;
    //添加move事件监听
    document.body.addEventListener('mousemove', mouseMovEven);
    function mouseMovEven(event) {
        var y = event.pageY - startY + top;
        y = y > 162 ? 162 : (y < 0 ? 1 : y);
        if (y > 160) { return };
        oColorpiker.prototype.palette_rule.style.top = y + 'px';
        var scaler = Math.ceil(y / 27);
        var color = Math.ceil(255 - (scaler * 30 - y + 1) * (255 / 30));
        console.log(scaler)
        switch (scaler) {
            case 0: right_color = [255, color, 0]
                break;
            case 1: right_color = [255, color, 0];
                break;
            case 2: right_color = [Math.abs(255 - color), 255, 0];
                break;
            case 3: right_color = [0, 255, color];
                break;
            case 4: right_color = [0, Math.abs(255 - color), 255];
                break;
            case 5: right_color = [color, 0, 255];
                break;
            case 6: right_color = [255, 0, Math.abs(255 - color)];
                break;
            default: right_color = [255, color, 0]
                break;
        }
        oColorpiker.prototype.left_palette.style.backgroundColor = 'rgb(' + right_color.join(',') + ')'
    }
    document.body.addEventListener('mouseup', function () {
        document.body.removeEventListener('mousemove', mouseMovEven, false);
    });
});
//左边选色
var xSelectColor = [];
oColorpiker.prototype.left_palette.addEventListener('mousemove', function (e) {
    xSelectColor = right_color.map(function (val, index) {
        var w = e.offsetX;
        var wStep = (val - 255) / 242;
        var wVal = 255 + w * wStep;
        var h = e.offsetY;
        var hStep = (0 - wVal) / 160;
        var hVal = wVal + h * hStep;
        return parseInt(hVal)
    });
    // console.log(xSelectColor)
    var colorStr = colorRGB2Hex(xSelectColor);
    rgbInner.innerHTML = colorStr;
    oColorpiker.prototype.last_color = colorStr;
    // tone.style.backgroundColor = 'rgb(' + xSelectColor.join(',') + ')';
});
